/**
 * @description 菜单管理-新增弹窗
 * @author 李艳
 */

import React, {Component} from 'react'
import { Form, Input, InputNumber,Modal} from 'antd';
import {featureConfig} from "../../../configs/CommonComponentsConfig";
import SearchTable from "../../../commons/components/SearchTable";

const FormItem = Form.Item;

class EditMenuModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            modalVisible: false,
            confirmLoading: false,
        }
    }

    handleClose = () => {
        this.props.form.resetFields();
    };

    componentDidMount() {
        this.props.onRef(this);

    }

    render() {
        const formItemLayout = {
            labelCol: {
                span: 7
            },
            wrapperCol: {
                span: 14
            },
        };

        const {confirmLoading, modalVisible, handleOk, handleCancel, defaultValue,isAddRoot} = this.props;
        const {getFieldDecorator} = this.props.form;
        let title = "新增节点";
        if (isAddRoot){
            title = "新增根节点";
        }
        return (
            <div>
                <Modal title={title}
                       visible={modalVisible}
                       onOk={handleOk}
                       onCancel={handleCancel}
                       width={400}
                       afterClose={this.handleClose}
                       confirmLoading={confirmLoading}
                       maskClosable={false}
                >
                    <Form>
                        <FormItem
                            {...formItemLayout}
                            style={{display:'none'}}
                                 label="parentId">
                            {getFieldDecorator('parentId', {
                                initialValue: defaultValue.id ?  defaultValue.id: "",
                            })(
                                <Input/>
                            )}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="名称">
                            {getFieldDecorator('name', {
                                initialValue: "",
                                rules: [{required: true, message: '请填写名称!'}]
                            })(
                                <Input />
                            )}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="排序">
                            {getFieldDecorator('rank', {
                                initialValue: "",
                                rules: [{required: true, message: '请填写排序!'}]
                            })(
                                <InputNumber precision={0} min={0} max={999999999} style={{width:"100%"}}/>
                            )}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="图标样式">
                            {getFieldDecorator('iconCls', {
                                initialValue: "",
                            })(
                                <Input/>
                            )}
                        </FormItem>
                        {!isAddRoot&&<FormItem
                            {...formItemLayout}
                            label="功能项"
                        >
                            {getFieldDecorator('feature.id', {
                                initialValue: "",
                            })(
                                <SearchTable config={featureConfig} initValue={false}/>
                            )}
                        </FormItem>}
                    </Form>
                </Modal>
            </div>
        );
    }
}

EditMenuModal = Form.create()(EditMenuModal);
export default EditMenuModal;
